<template>
	<div class="LandSeizure">
		<div class="LandSeizure-care">注：平台建议先和房客协商扣押事宜，然后提交平台处理。</div>
		<div class="LandSeizure-content">
			<div class="lc-item">
				<div class="lc-item-title">扣除押金</div>
				<div class="lc-item-input"><input type="text" :placeholder="Seizuremoney" v-model="modelemoney" /></div>
			</div>
			<div class="lc-item">
				<div class="lc-item-title">扣押原因</div>
				<div class="lc-item-input"><textarea class="lc-item-textarea" :placeholder="Seizurinfo" v-model="modelinfo"></textarea></div>
			</div>
			<div class="lc-item">
				<div class="lc-item-title">扣押原因</div>
				<div class="lc-item-input lc-item-camera">
					<input @change="fileImage" type="file" accept="image/jpeg" multiple class="lcii lcii-file">
					<img class="lcii lcii-camera" src="../assets/img/images/camera-icon_03.jpg" />
				</div>
			</div>
			<img :src="fileimg" class="fileimg" />
		</div>

		<div class="LandSeizure-btnbox">
			<button class="lbb-btn">提交</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "LandSeizure",
		data() {
			return {
				Seizuremoney: "请输入整数扣押金额，最高XXX元",
				modelemoney: "",
				Seizurinfo: "请输入扣押原因",
				modelinfo: "",
				fileimg: ''
			}
		},
		methods: {
			fileImage(e) {
				var that = this;
				var file = e.target.files[0];
				//				var imgSize = file.size / 1024;
				if(file.type.split("/")[1] !== "jpeg") {
					alert("请选择JPG的图片")
					return
				}
				var reader = new FileReader(); 
				reader.readAsDataURL(file);   
				reader.onload = function(evt) { 
					that.fileimg = evt.target.result
				} 
			}
		}
	}
</script>

<style>
	body {
		background: #fff;
	}
	
	.LandSeizure .LandSeizure-care {
		font-size: .25rem;
		color: #fff;
		background: #b2b2b2;
		height: .76rem;
		line-height: .76rem;
		padding: 0 .24rem;
		box-sizing: border-box;
	}
	
	.LandSeizure .lc-item {
		background: #fff;
		padding: .42rem .24rem .38rem .24rem;
		box-sizing: border-box;
		border-bottom: 1px solid #eeeeee;
	}
	
	.LandSeizure .lc-item-title {
		font-size: .32rem;
		color: #282828;
		line-height: .32rem;
		margin-bottom: .32rem;
	}
	
	.LandSeizure .lc-item-input {
		width: 100%;
	}
	
	.LandSeizure .lc-item-input>input {
		width: 100%;
		border: none;
		font-size: .29rem;
	}
	
	.LandSeizure .lc-item-textarea {
		width: 100%;
		height: .3rem;
		line-height: .29rem;
		font-size: .29rem;
		border: none;
	}
	
	.LandSeizure .lcii-file {
		position: relative;
		top: .5rem;
		height: 0;
		opacity: 0;
	}
	
	.LandSeizure .lcii-camera {
		display: block;
		width: 2.2rem;
		height: 1.47rem;
		margin-top: -.3rem;
	}
	
	.LandSeizure .LandSeizure-btnbox {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		text-align: center;
		padding-bottom: .42rem;
		box-sizing: border-box;
	}
	
	.LandSeizure .lbb-btn {
		border: none;
		background: #e25051;
		width: 3.85rem;
		height: .83rem;
		font-size: .34rem;
		color: #fff;
		border-radius: .05rem;
	}
	
	::-webkit-input-placeholder {
		color: #A4A4A4;
	}
	
	::-webkit-scrollbar {
		width: 0;
		display: none;
	}
	
	.LandSeizure .fileimg {
		width: 1rem;
		height: 1rem;
	}
</style>